// 1-用纯组件进行性能优化   用 PureComponent 减少了渲染次数，性能优化了3/4 
// 2-使用生命周期  shouldComponentUpdate  判断组件是否要更新
import React, { Component } from 'react'
// export default class denoZi extends React.PureComponent {  //直接取，没有解构


// import React, { Component,PureComponent } from 'react'
// export default class denoZi extends PureComponent {
export default class denoZi extends Component {
    // fun(num){
    //     console.log(num)
    // }
    shouldComponentUpdate(nextProps,nextState){
        //新的不等于旧的，相当于更新了
        // 新的等于旧的，表明没有更新
        return nextProps.style !== this.props.style   
    }
    render() {
        console.log("我是子组件")  //测试性能优化
        let {name,style,i,ziFun}=this.props;
        return (
            <div>
                {/* <input type="checkbox" onChange={this.fun.bind(this,i)}/> */}
                <input type="checkbox" onChange={ziFun.bind(this,i)}/>
                
                <span style={{background:style?"pink":""}}>{name}</span>
            </div>
        )
    }
}
